<template>
  <div id="home" class="home">
    <!-- 搜索框 -->
    <van-search
      v-model="searchValue"
      placeholder="总共有100件商品可选"
      input-align="center"
    />
    <!-- 轮播图 -->
    <van-swipe :autoplay="3000" :width="375" :height="200">
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <img v-lazy="image.image_url" />
      </van-swipe-item>
    </van-swipe>
    <!-- 导航图 -->
    <van-grid :column-num="5">
      <van-grid-item
        v-for="(item, index) in channel"
        :key="index"
        :icon="item.icon_url"
        :text="item.name"
      />
    </van-grid>
    <!-- 品牌推荐 -->
    <div class="brandlist">
      <van-panel title="品牌制造商直供">
        <van-grid :border="false" :column-num="2">
          <van-grid-item v-for="(item, index) in brandlist" :key="index">
            <van-image lazy-load :src="item.new_pic_url" />
            <h4 class="name">{{ item.name }}</h4>
            <span class="price">￥{{ item.floor_price }}</span>
          </van-grid-item>
        </van-grid>
      </van-panel>
    </div>
    <!-- 新品推荐 -->
    <div class="newGlist">
      <van-panel title="新品推荐">
        <van-grid :border="false" :column-num="2">
          <van-grid-item v-for="(item, index) in newgoodslist" :key="index">
            <van-image lazy-load :src="item.list_pic_url" />
            <h4 class="name">{{ item.name }}</h4>
            <span class="price">￥{{ item.retail_price }}</span>
          </van-grid-item>
        </van-grid>
      </van-panel>
    </div>
    <!-- 热门商品 -->
    <div class="hotgoods">
      <van-panel title="热门商品">
        <van-card
          v-for="(item, index) in hotgoods"
          :key="index"
          :price="item.retail_price"
          :desc="item.goods_brief"
          :title="item.name"
          :thumb="item.list_pic_url"
        />
      </van-panel>
    </div>
    <!-- tabber栏 -->
    <tab-btn></tab-btn>
  </div>
</template>

<script>
// @ is an alias to /src
import axios from "axios";
import api from "../assets/config/api";
import Vue from "vue";
import { Lazyload } from "vant";
import tabBtn from '@/components/tabBtn'
import TabBtn from '../components/tabBtn.vue';
Vue.use(Lazyload);
export default {
  name: "home",
  data: function () {
    return {
      searchValue: "",
      data: {},
    };
  },
  computed: {
    images: function () {
      if (typeof this.data.banner == "object") {
        return this.data.banner;
      } else {
        return [];
      }
    },
    channel: function () {
      if (typeof this.data.channel == "object") {
        return this.data.channel;
      } else {
        return [];
      }
    },
    brandlist: function () {
      if (typeof this.data.brandList == "object") {
        return this.data.brandList;
      } else {
        return [];
      }
    },
    newgoodslist: function () {
      if (typeof this.data.newGoodsList == "object") {
        return this.data.newGoodsList;
      } else {
        return [];
      }
    },
    hotgoods: function () {
      if (typeof this.data.hotGoodsList == "object") {
        return this.data.hotGoodsList;
      } else {
        return [];
      }
    },
  },
  components: {
    tabBtn
  },
  async mounted() {
    let res = await axios.get(api.IndexUrl);
    this.data = res.data.data;
    console.log(res.data.data);
  },
};
</script>


<style lang="less" scoped>
.home {
  //grid溢出隐藏,全局
  .van-grid-item {
    overflow: hidden;
  }
  //轮播图尺寸
  img {
    width: 375px;
    height: 200px;
  }
  //商品推荐
  /deep/ .brandlist {
    .van-grid-item__content {
      padding: 0;
    }
    img {
      border: 1px solid #fff;
    }
    .name {
      position: absolute;
      left: 10px;
      top: 10px;
    }
    .price {
      position: absolute;
      left: 10px;
      top: 38px;
      color: lightsalmon;
      font-size: 15px;
    }
  }
  .newGlist {
    .name {
      overflow: hidden;
      width: 80%;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .price {
      color: lightsalmon;
      font-size: 15px;
    }
  }

  /deep/ .hotgoods {
    .van-card__content {
      justify-content: center;
      text-align: left;
      .van-card__price {
        color: lightsalmon;
      }
    }
  }

}
</style>